var tabs = {
  options:{}
};

/**
 * options = {}
 * @param options
 */
tabs.init = function (options) {
  var initOptions = {
    wrapDom:"body", //挂载点
    tabsList:[],// tab列表{label:tab显示文字}
    activeIndex:0, // 首次激活tab index
    onChange:function () {}
  };
  this.options = Object.assign({},initOptions,options);
  console.log(this.options);
  this.initCss();
  this.createTabs();
  this.initEvent()
};
tabs.initCss = function() {
  var styleStr = "<style type=\"text/css\">" +
    ".page-tabs {overflow: hidden}" +
    ".tab-item {display: inline-block;float: left;text-align:center;font-size: 14px; height:28px;font-weight: 500;color:#656565}" +
    ".tab-item-active {position:relative;color: #E1231F;font-size: 17px;font-weight: bold}" +
    ".tab-item.tab-item-active:after { content:'';position: absolute;bottom: 0px;left:50%;width: 25px;height: 3px;background: #d1392d;border-radius: 12px;transform: translateX(-50%)}" +
    "" +
    ""
    "</style>";
  $("head").append(styleStr);
};
tabs.createTabs = function () {
  console.log(this.options.wrapDom)
  var rootDom = document.querySelector(this.options.wrapDom);
  console.log(rootDom)
  var html = "";
  var width = 100/this.options.tabsList.length+'%';
  var avtiveIndex = this.options.activeIndex;
  this.options.tabsList.map(function (item,index) {
    var temp = "";
    if(avtiveIndex === index) {
     temp = ' <div class="tab-item-active tab-item" style="width:'+width+'" >'+item.label+'</div>';
    } else {
      temp = ' <div class="tab-item" style="width:'+width+'" >'+item.label+'</div>';

    }
    html += temp;
  })
  var tabHtml = " <div class=\"tabs-wrapper\">" +html+"</div>";
  $(rootDom).append(tabHtml);
};
tabs.initEvent = function () {
  let _this = this;
  $(document).on('click','.tab-item',function (e) {
   $(this).addClass("tab-item-active");
   $(this).siblings().removeClass("tab-item-active");
    console.log($(this).index())
    var index = $(this).index();
    _this.options.onChange(index)
  })

}